{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['系统管理:system/user/index', '岗位管理'])}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!-- search -->
                <div class="card-search mb-2-5">
                    <form class="row g-3" onsubmit="return false;" id="search-form">
                        <div class="col-auto">
                          <input type="text" class="form-control" autocomplete="off" name="code" placeholder="岗位编码">
                        </div>
                        <div class="col-auto">
                            <input type="text" class="form-control" autocomplete="off" name="name" placeholder="岗位名称">
                          </div>
                          <div class="col-auto">
                            <select class="form-select" name="status">
                                <option value="0">所有</option>
                                <option value="1">正常</option>
                                <option value="2">停用</option>
                              </select>
                          </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary" onclick="search();"><span class="mdi mdi-magnify"></span> 查询</button>
                          <button type="reset" class="btn btn-default btn-light"><span class="mdi mdi-refresh"></span> 重置</button>
                        </div>
                      </form>
                  </div>
                  <!-- end search-->

                  <div id="toolbar" class="toolbar-btn-action">
                    <button type="button" class="btn btn-success me-1 btn-sm" onclick="add();">
                      <span class="mdi mdi-plus"></span> 新增
                    </button>
                    <button type="button" class="btn btn-info me-1 btn-sm" onclick="exportAll();">
                      <span class="mdi mdi-export"></span> 导出
                    </button>
                  </div>
                  <table id="table"></table>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLiveLabel">岗位信息</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{:url('system/post/save')}" method="post" class="input-form needs-validation" novalidate>
        <input type="hidden" name="id" value="" id="post-id">
        <div class="modal-body">
                <div class="mb-3 row">
                    <label for="name" class="col-sm-3 col-form-label">岗位名称 <font color="red">*</font></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" name="name" autocomplete="off" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="code" class="col-sm-3 col-form-label">岗位编码 <font color="red">*</font></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="code" name="code" autocomplete="off" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="sort" class="col-sm-3 col-form-label">显示顺序 <font color="red">*</font></label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="sort" name="sort" autocomplete="off" required>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="remark" class="col-sm-3 col-form-label">备注</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" id="remark" name="remark" autocomplete="off"></textarea>
                    </div>
                </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        </div>
    </form>
    </div>
  </div>
</div>

<script>
    function search(){
        var data  = $('#search-form').serialize();
        $('#table').bootstrapTable('refresh', {
            url: "{:url('system/post/data')}?" + data,
        });
    }
 var myModal = null;
 function add(){
    $('.input-form')[0].reset();
    $('#post-id').val('');
    myModal.show();
 }
 function editPost(id){
    $.post("{:url('system/post/view')}", {id: id}, function (res){
        $('#post-id').val(id);
        $('#name').val(res.name);
        $('#code').val(res.code);
        $('#sort').val(res.sort);
        $('#remark').val(res.remark);
        myModal.show();
    });
 }
 function setStatus(id){
    xp_confirm("{:url('system/post/status')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
 function removePost(id){
    xp_confirm("{:url('system/post/remove')}", {id: id}, function (){
        $('#table').bootstrapTable('refresh');
    });
 }
  function exportAll(){
    var l = $('body').lyearloading({
        opacity: 0.2,
        spinnerSize: 'lg'
    });
    var data = $('#search-form').serialize();
    $.get("{:url('system/post/export')}?" + data, {}, function(res){
        l.destroy();
        layer.alert('导出成功', { icon: 'success' });
        window.location.href = res.url;
    });
  }
  $(function (){
    myModal = new bootstrap.Modal($('#myModal'));
    validation_form('.input-form', function (){
      myModal.hide();
        $('#table').bootstrapTable('refresh');
    });
    $('#table').bootstrapTable({
          toolbar: '#toolbar',
          classes: 'table table-bordered table-hover table-striped lyear-table',
          url: "{:url('system/post/data')}",
          pagination: true,
          search: false,
          pageSize: 20,
          sidePagination: 'server',
          columns: [
              {'field': 'id', title: 'ID'},
              {'field': 'code', title: '岗位编码'},
              {'field': 'name', title: '岗位名称'},
              {'field': 'sort', title: '显示顺序'},
              {'field': 'status', title: '状态', formatter: function(value, item){
                var dom = value == 1 ? `<span class="badge bg-danger">停用</span>` : `<span class="badge bg-success">正常</span>`;
                return `<span style="cursor: pointer;" onclick="setStatus('${item.id}');">${dom}</span>`;
              }},
              {'field': 'update_time', title: '更新时间'},
              {'field': 'update_by', title: '操作', formatter: function(value, item){
                var dom = `<span class="badge bg-info" onclick="editPost('${item.id}');" style="cursor: pointer;"><span class="mdi mdi-square-edit-outline"></span> 编辑</span>`;
                dom = dom + `<span class="badge bg-danger" onclick="removePost('${item.id}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-delete-outline"></span> 删除</span>`;
                return dom;
              }},
          ]
      });
  })
</script>